<template>
  <div>
    <div
      ref="chartContainer"
      class="div-chart"
      style="display: block; width: 100%; height: 360px"
    />
  </div>
</template>
<script setup>
import * as echarts from "echarts";
import { onMounted, ref, nextTick, defineProps, watch } from "vue";

const chartContainer = ref(null);
let myEcharts = echarts;

const chartData = defineProps(["data"]);
console.log(chartData, chartData.data, 1111111);
onMounted(() => {
  if (
    chartContainer.value &&
    chartData &&
    chartData.data &&
    chartData.data.length
  ) {
    const myChart = myEcharts.init(chartContainer.value);
    const _times = chartData.data.map(item => item.time).reverse();
    const _vols = chartData.data.map(item => item.vol).reverse();
    nextTick(() => {
      initChart(myChart, { times: _times, vols: _vols });
      myChart.resize();
      // setTimeout(() =>{
      //
      // },50)
    });
    window.onresize = function () {
      nextTick(() => {
        myChart.resize();
      });
    };
    // ... 设置 myChart 的配置项和数据 ...
  } else {
    console.log("Chart container is not available");
  }
});
watch(
  () => chartData.data,
  (newVal, oldVal) => {
    if (newVal.length && chartContainer.value) {
      const myChart = myEcharts.init(chartContainer.value);
      const _times = newVal.map(item => item.time).reverse();
      const _vols = newVal.map(item => item.vol).reverse();
      nextTick(() => {
        initChart(myChart, { times: _times, vols: _vols });
        myChart.resize();
      });
      window.onresize = function () {
        nextTick(() => {
          myChart.resize();
        });
      };
      // setTimeout(() =>{
      //
      // },50)
    }
  }
);
const initChart = (myChart, { times, vols }) => {
  console.log(times, vols, 2222);
  const option = {
    grid: {
      top: "6%",
      right: "4%",
      left: "12%",
      bottom: "8%"
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: times,
      axisLine: {
        show: false // 不显示坐标轴线
      },
      splitLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      splitArea: {
        interval: "auto"
      },
      axisPointer: {
        label: {
          show: false
        }
      }
    },
    yAxis: {
      type: "value",
      axisLine: {
        show: false // 不显示坐标轴线
      },
      splitLine: {
        show: false
      },
      axisPointer: {
        label: {
          show: false
        }
      }
    },
    tooltip: {
      trigger: "axis",
      show: true,
      axisPointer: {
        type: "cross",
        snap: true
      },
      triggerOn: "mousemove",
      backgroundColor: "none",
      borderWidth: 0,
      showContent: true,
      formatter: params => {
        if (params && params.length) {
          const time = params[0].axisValue;
          const num = params[0].data;

          const textStr = `<div style="background: rgba(76, 77, 85,0.5);padding: 4px 10px;border-radius: 20px;border: 1px solid #9CB3BF;display: flex;align-items: center;gap:10px;">
                               <div style="display: flex;align-items: center;justify-content: center; width:16px;height:16px;border-radius:50%;background: linear-gradient( 57deg, #47DDC2 0%, #C1FFC8 100%);">
                                       <span style="display: block;width: 8px;height: 8px;border-radius:50%;background: #E5F0F4;box-shadow: 0px 8px 8px 0px rgba(0,0,0,0.25);"></span>
                               </div>
                               <div style="display: flex;flex-direction: column;justify-content: center">
                                    <div style="font-size: 12px;color: #dce5e8;margin-bottom: -4px">${num}</div>
                                    <div style="font-size: 10px;color: #94a6af;margin-top: -4px">${time}</div>
                                </div>
                        </div>`;
          return textStr;
        }
      }
    },
    series: [
      {
        data: vols,
        type: "line",
        lineStyle: {
          width: 1,
          color: "#79EBC4"
        },
        itemStyle: {
          borderWidth: 0
        },
        symbol: "none",
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "#44756C" // 渐变色的起始颜色
              },
              {
                offset: 1,
                color: "#1F2832" // 渐变色的结束颜色
              }
            ])
          }
        }
      }
    ]
  };
  option && myChart.setOption(option);
};
</script>
<style scoped lang="less">
.div-chart {
  width: 100%;
  min-height: 400px;
  height: 100%;
}
</style>
